<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCommonlyDrugList,getCommonlyPrescription,getOldPrescriptions} from '@/api/myPharmacy/doctorClient/index.js'

const router = useRouter()

// 标签页配置
const tabs = [
  { key: 'drugs', name: '常用药品' },
  { key: 'prescriptions', name: '常用处方' },
  { key: 'history', name: '历史处方' }
]
const currentTab = ref('drugs')

// 数据列表
const drugList = ref([])
const prescriptionList = ref([])
const historyList = ref([])

// 返回上一页
const goBack = () => {
  router.back()
}

// 删除药品
const deleteDrug = (id) => {
  ElMessageBox.confirm('确定要删除这个药品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // TODO: 调用删除API
    ElMessage.success('删除成功')
  })
}

// 编辑处方
const editPrescription = (id) => {
  // TODO: 跳转到编辑页面
  router.push(`/prescription/edit/${id}`)
}

// 删除处方
const deletePrescription = (id) => {
  ElMessageBox.confirm('确定要删除这个处方吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // TODO: 调用删除API
    ElMessage.success('删除成功')
  })
}

// 新增
const addNew = () => {
  if (currentTab.value === 'drugs') {
    router.push('/drug/add')
  } else {
    router.push('/prescription/add')
  }
}

// 获取数据
onMounted(async () => {
  try {
    // 获取常用药品列表
    const drugRes = await getCommonlyDrugList()
    if (drugRes.code === 200) {
      drugList.value = drugRes.data
      console.log('常用药品列表:', drugList.value)
    } else {
      ElMessage.error(drugRes.msg || '获取常用药品列表失败')
    }

    // 获取常用处方列表
    const prescriptionRes = await getCommonlyPrescription()
    if (prescriptionRes.code === 200) {
      prescriptionList.value = prescriptionRes.data
      console.log('常用处方列表:', prescriptionList.value)
    }

    // 获取历史处方列表
    const historyRes = await getOldPrescriptions()
    if (historyRes.code === 200) {
      historyList.value = historyRes.data
      console.log('历史处方列表:', historyList.value)
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  }
})
</script>

<template>
  <div class="pharmacy-container">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <div class="back-button" @click="goBack">
        <i class="el-icon-back"></i>
      </div>
      <div class="title">我的药房</div>
    </div>

    <!-- 标签页 -->
    <div class="tabs">
      <div
          v-for="tab in tabs"
          :key="tab.key"
          :class="['tab-item', { active: currentTab === tab.key }]"
          @click="currentTab = tab.key"
      >
        {{ tab.name }}
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 常用药品列表 -->
      <div v-if="currentTab === 'drugs'" class="drug-list">
        <div class="list-title">常用药品列表 ({{ drugList.length }})</div>
        <div v-for="drug in drugList" :key="drug.id" class="drug-item">
          <div class="drug-icon">
            <el-image :src="drug.drugImage" fit="cover"></el-image>
          </div>
          <div class="drug-info">
            <div class="drug-name">{{ drug.drugName }}</div>
            <div class="drug-wrap">{{ drug.wrap }}</div>
            <div class="drug-company">{{ drug.manufacturersName }}</div>
            <div class="drug-price">¥ {{ drug.price.toFixed(2) }}</div>
          </div>
          <div class="drug-action">
            <el-button type="danger" size="small" plain @click="deleteDrug(drug.id)">
              删除
            </el-button>
          </div>
        </div>
      </div>

      <!-- 常用处方列表 -->
      <div v-if="currentTab === 'prescriptions'" class="prescription-list">
        <div class="list-title">常用处方列表 ({{ prescriptionList.length }})</div>
        <div v-for="prescription in prescriptionList" :key="prescription.id" class="prescription-item">
          <div class="prescription-header">
            <span class="diagnosis">临床诊断：{{ prescription.diagnosis }}</span>
            <span class="drug-count">共{{ prescription.commonlyDosageVOS.length }}种药品</span>
          </div>
          <div class="prescription-drugs">
            <div v-for="drug in prescription.commonlyDosageVOS" :key="drug.id" class="prescription-drug-item">
              <div class="drug-basic">{{ drug.drugName }}</div>
              <div class="drug-usage">
                用法：每次{{ drug.single }}片，每日{{ drug.frequencyMedications }}次
              </div>
            </div>
          </div>
          <div class="prescription-actions">
            <el-button type="primary" size="small" plain @click="editPrescription(prescription.id)">
              编辑处方
            </el-button>
            <el-button type="danger" size="small" plain @click="deletePrescription(prescription.id)">
              删除
            </el-button>
          </div>
        </div>
      </div>

      <!-- 历史处方列表 -->
      <div v-if="currentTab === 'history'" class="history-list">
        <div class="list-title">历史处方列表</div>
        <div v-for="history in historyList" :key="history.id" class="history-item">
          <div class="history-header">
            <div class="patient-info">
              <span>{{ history.patientName }}</span>
              <span>{{ history.gender }}</span>
              <span>{{ history.age }}岁</span>
            </div>
            <div class="prescription-info">
              <span>处方号：{{ history.prescriptionNumber }}</span>
              <span>{{ history.createDatetime }}</span>
            </div>
          </div>
          <div class="diagnosis">诊断：{{ history.diagnosis }}</div>
          <div class="history-drugs">
            <div v-for="drug in history.dosageVOS.filter(d => d)" :key="drug.id" class="history-drug-item">
              <span>{{ drug.drugName }}</span>
              <span>{{ drug.drugNum }}盒</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-button">
      <el-button type="primary" @click="addNew">
        + 新增{{ currentTab === 'drugs' ? '常用药品' : '常用处方' }}
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pharmacy-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60px;
}

.nav-header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;

  .back-button {
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
}

.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    position: relative;

    &.active {
      color: #409EFF;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background-color: #409EFF;
      }
    }
  }
}

.content-area {
  padding: 16px;

  .list-title {
    margin-bottom: 16px;
    font-size: 14px;
    color: #666;
  }
}

.drug-item, .prescription-item, .history-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.drug-item {
  display: flex;
  align-items: center;

  .drug-icon {
    width: 60px;
    height: 60px;
    margin-right: 12px;

    .el-image {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }

  .drug-info {
    flex: 1;

    .drug-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .drug-wrap, .drug-company {
      font-size: 12px;
      color: #999;
      margin-bottom: 4px;
    }

    .drug-price {
      color: #f56c6c;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.prescription-item {
  .prescription-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

    .diagnosis {
      font-weight: 500;
    }

    .drug-count {
      color: #999;
      font-size: 12px;
    }
  }

  .prescription-drugs {
    margin-bottom: 12px;
  }

  .prescription-drug-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }
  }
}

.history-item {
  .history-header {
    margin-bottom: 12px;
  }

  .patient-info {
    span {
      margin-right: 12px;
    }
  }

  .prescription-info {
    color: #999;
    font-size: 12px;
    margin-top: 4px;
  }

  .diagnosis {
    margin-bottom: 12px;
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);

  .el-button {
    width: 100%;
  }
}
</style>
